<template>
	<view class="container">
		<view class="top">
			<text>2024-2025学年第一学期</text>
		</view>
		<view class="mid" @click="setCollege('艺术学院')">
			<text>
				<img src="../../static/学院.png" alt="" />
				艺术学院
			</text>
			<text>本学期已确认：1次</text>
			<text>本学期未确认：0次</text>
		</view>
		<view class="mid" @click = "setCollege('体育学院')">
			<text>
				<img src="../../static/学院.png" alt="" />
				体育学院
			</text>
			<text>本学期已确认：1次</text>
			<text>本学期未确认：0次</text>
		</view>
		<view class="mid" @click = "setCollege('国际汉学院')">
			<text>
				<img src="../../static/学院.png" alt="" />
				国际汉学院
			</text>
			<text>本学期已确认：1次</text>
			<text>本学期未确认：0次</text>
		</view>
		<view class="mid" @click = "setCollege('民族教育学院')">
			<text>
				<img src="../../static/学院.png" alt="" />
				民族教育学院
			</text>
			<text>本学期已确认：1次</text>
			<text>本学期未确认：0次</text>
		</view>
		<view class="mid" @click = "setCollege('数学与统计学院')">
			<text>
				<img src="../../static/学院.png" alt="" />
				数学与统计学院
			</text>
			<text>本学期已确认：1次</text>
			<text>本学期未确认：0次</text>
		</view>
		<view class="mid" @click = "setCollege('历史文化学院')">
			<text>
				<img src="../../static/学院.png" alt="" />
				历史文化学院
			</text>
			<text>本学期已确认：1次</text>
			<text>本学期未确认：0次</text>
		</view>

	</view>
</template>

<script setup>
import {ref} from 'vue';

const college=ref();

const setCollege=(selectedCollege)=>{
  college.value = selectedCollege;
  // 将学院信息储存到本地
  uni.setStorageSync('college',selectedCollege);

  // 根据角色跳转到对应页面
  if (selectedCollege !== "") {
    uni.navigateTo({
      url: '/pages/school/college_confirm_record'
    });
  }

}
</script>

<style>
	.container {
		width: 375px;
		height: 723px;
		background: #F3F5F9;
		margin: 0 auto;
	}
	.top {
		padding-left: 12px;
		padding-top: 15px;
	}
	.top text {
		font-size: 15px;
		color: #000000;
	}
	.mid {
		width: 327px;
		height: 68px;
		background: #FFFFFF;
		border-radius: 12px;
		margin-left: 12px;
		margin-top: 12px;
		padding-left: 12px;
		padding-top: 16px;
		padding-bottom: 16px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-bottom: 12px;
	}
	.mid text:nth-child(1){
		font-size: 15px;
		color: #000000;
	}
	.mid text {
		font-size: 12px;
	}
	img {
		width: 16px;
		height: 16px;
	}
</style>